<template>
	<view class="concent">
		<view class="tag" :style="{height:tagPhone+'px'}">
			<u-tabs :list="tagsList" :current="index" @click="changeIndex"></u-tabs>
		</view>

		<swiper :current="index" circular @change="changeCurrinndex"
			:style="{height:heights+'px', 'margin-top': '75px'}">
			<swiper-item>
				<scroll-view scroll-y="true" :style="{height:heights+'px'}">
					<!--
					<altm></altm>
					<altm></altm>
					<altm></altm> -->
					<copyRedBook :list="list1"></copyRedBook>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view :scroll-top="scrollTop" :style="{height:heights+'px'}" scroll-y="true"
					@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
					<!-- 搜索 -->
					<view class="inputs">
						<u--text suffixIcon="arrow-down" iconStyle="font-size: 18px" text="龙岩"
							@click="goPositionPage"></u--text>
						<u--input placeholder="请输入内容" prefixIcon="search" border="surround" :customStyle="mystyle"
							v-model="inputs" @change="change"></u--input>
					</view>
					<!-- 第二层 -->
					<view class="secode">
						<u-scroll-list style="display: flex;flex-direction: column;" @right="right" @left="left">
							<view class="scroll-list" style="flex-direction:column;flex-wrap: wrap;">
								<view class="item" v-for="(item, index) in photoTypeList" :key="item.id"
									@click="gourl(item.status, item.type)">
									<image class="item_image" style="width: 80px;height: 80px;border-radius: 50%;"
										mode="widthFix" :src="item.url">
									</image>
									<text class="item__text">{{ item.type }}</text>
								</view>
							</view>
						</u-scroll-list>
					</view>

					<!-- 第san层 -->
					<view class="secend">
						<view class="title">
							热门推荐
						</view>
						<view class="url_space">
							<u-swiper height="150px" :list="list2" keyName="image" showTitle :autoplay="false" circular
								@click="goPhotoGrapher"></u-swiper>
						</view>
					</view>

					<!-- 第四层 -->
					<view>
						<!-- 冲洗入口 -->
						<view class="chongxi">
							<view class="title_zizhu">
								自助冲洗入口
							</view>
						</view>
						<view class="tags_zizhu">
							<u-tag text="冲洗打印" plain shape="circle" @click="goPage(0)"></u-tag>
							<u-tag text="相册定制" plain shape="circle" @click="goPage(1)"></u-tag>
							<u-tag text="摆台定制" plain shape="circle" @click="goPage(2)"></u-tag>
						</view>
					</view>

					<!-- copy小红书页面 -->
					<copyRedBook :list="list1"></copyRedBook>
				</scroll-view>
			</swiper-item>

		</swiper>

		<view style="height: 70px;">
			<tabber_my></tabber_my>
		</view>
	</view>
</template>

<script>
	import {
		reqPhotoTypePage
	} from '@/api/photoType/index.js'
	export default {
		data() {
			return {
				index: 1, //推荐页
				tagPhone: 50,
				tagsList: [{
					name: '关注',
					index: 0
				}, {
					name: '推荐',
					idnex: 1
				}],
				inputs: '',
				heights: 750,
				// 照片类型数组
				photoTypeList: [],

				mystyle: {
					width: '100%',
					backgroundColor: 'white',
					flex: 5
				},
				list2: [{
					id: 1,
					image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				}, {
					id: 2,
					image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}, {
					id: 3,
					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄疏窗，沉思往事立残阳'
				}],
				// 作品集数据
				list1: [{
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, ]
			}
		},
		methods: {
			changeCurrinndex(e) {
				console.log(e)
				this.index = e.detail.current
			},
			//小圈跳转
			gourl(type, title) {
				uni.navigateTo({
					url: `/PackageA/photo/photo?type=${type}&title=${title}`
				})
			},
			// 触底
			lower(e) {
				console.log(e + '到零零零零')
			},
			//修改时间格式
			formdata(obj = {}) {
				let result = ''
				for (let name of Object.keys(obj)) {
					let value = obj[name];
					result +=
						'\r\n--XXX' +
						'\r\nContent-Disposition: form-data; name=\"' + name + '\"' +
						'\r\n' +
						'\r\n' + value
				}
				return result + '\r\n--XXX--'
			},
			change(e) {
				console.log('change', e)
			},
			//左右初定
			left() {
				console.log('left');
			},
			right() {
				console.log('right');
			},
			//修改下标
			changeIndex(e) {
				console.log(e)
				this.index = e.index
			},
			// 热门推荐跳转事件
			goPhotoGrapher(e) {
				uni.navigateTo({
					url: `/PackageB/PhotoGrapher/PhotoGrapher?id=${this.list2[e].id}`
				})
			},
			goPage(num) {
				uni.navigateTo({
					url: `/Self-rinse/rinse/index?num=${num}`
				})
			},
			goPositionPage() {
				uni.navigateTo({
					url: `/pages/position/position`
				})
			},
			// 获取照片类型数据请求
			async getPhotoTypeData(pageData) {
				const res = await reqPhotoTypePage(pageData)
				this.photoTypeList = res.body.records
			}
		},
		onLoad() {
			//处理兼容高度
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.heights = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
				}
			})
			uni.getSystemInfo({
				success(e) {
					console.log(e)
					if (e.osName == 'ios') {
						that.tagPhone = 50
					} else {
						that.tagPhone = 0
					}
				}
			})

			this.getPhotoTypeData({
				pageNum: 10,
				pageSize: 1
			})
		}
	};
</script>
<style lang="scss" scoped>
	.chongxi {
		width: 100%;
		height: 35px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		align-items: center;
		margin-top: 8px;
	}

	.title_zizhu {
		width: 120px;
		height: 30px;
		font-size: 18px;
	}

	.tags_zizhu {
		height: 30px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		&> ::v-deep view {
			margin: 2px 5px;
		}
	}

	.tags {
		width: 100%;
		height: 150px;
		background-color: pink;
	}

	.tag {
		width: 100%;
		margin-top: 25px;
		display: flex;
		justify-content: center;
		position: fixed;
		top: 0px;
	}

	.secend {
		width: 100%;
		height: 200px;
	}

	.title {
		font-size: 22px;
		padding: 8px;
		margin-top: 10px;
	}

	.url_space {
		margin: 9px;
		margin-top: 0;
	}

	page {
		width: 100%;
		height: 100%;
	}

	.secode {
		width: 100%;
		height: 250px;
	}

	.concent {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.inputs {
		padding: 10px 5px;
		display: flex;
	}

	.scroll-list {
		width: 100%;
		height: 250px;
		display: flex;
		flex-direction: row;
	}

	.item {
		width: 100px;
		height: 100px;
		margin: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.item__image {
		width: 80px;
		height: 80px;
		border-radius: 50%;
	}

	.item__text {
		padding: 5px;
	}
</style>